<template>
  <div class="region-container">
    <div class="main-info-title fs18 flex flex-row-center">
      <span>地区微群</span>
      <el-button type="primary" style="margin-left: auto" @click="addGroup">
        新建微群
      </el-button>
    </div>
    <HHsearch
      ref="search"
      :search-options="searchOptions"
      :btn-option="1"
      @search="search"
      @reset="reset"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :table-column="tableColumn"
      :btn-option="btnOption"
      :table-data="tableData"
      @page-click="pageClick"
    >
      <!-- 群头像 -->
      <template #groupHeadUrl="{ data }">
        <el-image
          style="width: 50px; height: 50px"
          :src="data.groupHeadUrl"
          fit="cover"
        ></el-image>
      </template>

      <!-- 简介 -->
      <template #synopsis="{ data }">
        <el-tooltip class="item" effect="dark" placement="right-start">
          <div slot="content" style="max-width: 500px">
            {{ data.synopsis }}
          </div>
          <div class="clamp">{{ data.synopsis }}</div>
        </el-tooltip>
      </template>

      <!-- 二维码 -->
      <template #img="{ data }">
        <el-image
          style="width: 50px; height: 50px"
          :src="data.qrUrl"
          fit="cover"
        ></el-image>
      </template>

      <!-- 显示状态 -->
      <template #status="{ data }">
        <el-switch
          v-model="data.isShow"
          active-text="显示"
          inactive-text="隐藏"
          :active-value="1"
          :inactive-value="0"
          @change="changeStatus(data)"
        ></el-switch>
      </template>
    </HHtable>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogTableVisible"
      width="500px"
      :lock-scroll="false"
      @closed="handleDialogClose"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
        label-position="left"
      >
        <el-form-item label="群名" prop="contactGroupName">
          <el-input
            v-model="form.contactGroupName"
            placeholder="请输入群名"
          ></el-input>
        </el-form-item>
        <el-form-item label="群二维码" prop="groupHeadUrl">
          <el-upload
            class="avatar-uploader"
            :action="`${baseURL}/hce/common/upload.do`"
            list-type="picture-card"
            :limit="1"
            :file-list="heardArray"
            :on-exceed="handleExceed"
            :on-remove="handleRemove1"
            :on-success="handleSuccess1"
            accept="image/jpg, image/jpeg,image/png"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">
              建议上传1:1尺寸图片，避免显示不全
              <strong style="color: red">(只能上传一张图片)</strong>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="简介" prop="synopsis">
          <el-input
            v-model="form.synopsis"
            placeholder="请输入简介"
            type="textarea"
            :rows="3"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item label="群二维码" prop="qrUrl">
          <el-upload
            class="avatar-uploader"
            :action="`${baseURL}/hce/common/upload.do`"
            list-type="picture-card"
            :limit="1"
            :file-list="qrArray"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            accept="image/jpg, image/jpeg,image/png"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">
              建议上传1:1尺寸图片，避免显示不全
              <strong style="color: red">(只能上传一张图片)</strong>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="btn-container flex flex-center">
        <el-button type="primary" @click="saveWechatGroupInfo">保存</el-button>
        <el-button @click="handleDialogClose">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  import {
    getWechatGroupList,
    updateWechatGroupStatus,
    addWechatGroup,
    deleteWechatGroup,
    updateWechatGroup,
  } from '@/api/region'
  export default {
    components: {
      HHsearch,
      HHtable,
    },
    data() {
      return {
        total: 500,
        dialogTableVisible: false,
        dialogTitle: '新建微群',
        qrArray: [],
        heardArray: [],
        form: {
          contactGroupName: '',
          synopsis: '',
          qrUrl: '',
          groupHeadUrl: '',
        },
        rules: {
          contactGroupName: [
            { required: true, message: '请输入群名', trigger: 'blur' },
          ],
          synopsis: [
            { required: true, message: '请输入简介', trigger: 'blur' },
          ],
          qrUrl: [{ required: true, message: '请上传群二维码' }],
          groupHeadUrl: [{ required: true, message: '请上传群头像' }],
        },
        tableColumn: [
          {
            prop: 'contactGroupName',
            label: '群名',
          },
          {
            label: '群头像',
            slotContent: 'groupHeadUrl',
          },
          {
            prop: 'synopsis',
            label: '简介',
            slotContent: 'synopsis',
          },
          {
            label: '群二维码',
            slotContent: 'img',
          },
          {
            prop: 'createTimeStr',
            label: '创建日期',
          },
          {
            label: '状态',
            slotContent: 'status',
          },
        ],
        tableData: [],
        searchOptions: [
          {
            type: 'text',
            prop: 'contactGroupName',
            span: 5,
            label: '群名：',
            placeholder: '请输入搜索',
          },
          {
            type: 'daterange',
            prop: 'daterange',
            label: '创建日期：',
            span: 8,
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            valueFormat: 'yyyy-MM-dd',
          },
          {
            type: 'select',
            prop: 'isShow',
            label: '状态：',
            span: 5,
            placeholder: '请输入搜索',
            arr: [
              {
                label: '显示',
                value: 1,
              },
              {
                label: '隐藏',
                value: 0,
              },
            ],
          },
        ],
        btnOption: [
          {
            type: 'primary',
            size: 'mini',
            text: '修改',
            show: true,
            func: this.editor,
          },
          {
            type: 'danger',
            size: 'mini',
            text: '删除',
            show: true,
            func: this.delete,
          },
        ],
        params: {
          pageNum: 1,
          pageSize: 10,
          contactGroupName: '',
        },
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        this.getWechatGroupList()
      },
      getWechatGroupList() {
        this.$refs.table.loading = true
        getWechatGroupList(this.params).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.result
            this.total = res.data.total
            setTimeout(() => {
              this.$refs.table.loading = false
            }, 1000)
          } else {
            this.$refs.table.loading = false
          }
        })
      },
      addGroup() {
        this.dialogTitle = '新建微群'
        this.form = {
          title: '',
          abstract: '',
          qrUrl: '',
          groupHeadUrl: '',
        }
        this.dialogTableVisible = true
      },
      handleDialogClose() {
        this.form.qrUrl = ''
        this.qrArray = []
        this.heardArray = []
        this.$refs.form.resetFields() // 重置表单校验
        this.dialogTableVisible = false
      },
      search(res) {
        if (res.daterange) {
          console.log('res', res)
          res.startDay = res.daterange[0]
          res.stopDay = res.daterange[1]
          // delete res.daterange;
        }
        const arr = Object.keys(res)
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] !== 'daterange') this.params[arr[i]] = res[arr[i]]
        }
        this.initData()
      },
      reset() {
        this.params = {
          pageNum: 1,
          pageSize: 10,
        }
        this.$refs.search.removeFilterArray()
        this.initData()
      },
      pageClick(pager) {
        this.params.pageNum = pager
        this.initData()
      },
      editor(data) {
        this.dialogTitle = '修改微群'
        this.qrArray.push({
          url: data.qrUrl,
        })
        this.heardArray.push({
          url: data.groupHeadUrl,
        })
        this.form.contactGroupName = data.contactGroupName
        this.form.synopsis = data.synopsis
        this.form.qrUrl = data.qrUrl
        this.form.groupHeadUrl = data.groupHeadUrl
        this.form.id = data.id
        setTimeout(() => {
          this.dialogTableVisible = true
        }, 500)
      },
      delete(data) {
        const params = {
          ids: data.id,
        }
        deleteWechatGroup(params).then((res) => {
          if (res.code === 200) {
            this.$baseMessage('删除成功', 'success')
            this.initData()
          }
        })
      },
      handleExceed() {
        this.$baseMessage('上传文件已经超过了一张', 'warning')
      },
      handleRemove() {
        this.form.qrUrl = ''
      },
      handleRemove1() {
        this.form.groupHeadUrl = ''
      },
      handleSuccess(fileList) {
        this.form.qrUrl = fileList.data[0].url
      },
      handleSuccess1(fileList) {
        this.form.groupHeadUrl = fileList.data[0].url
      },
      saveWechatGroupInfo() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.dialogTitle == '新建微群') {
              addWechatGroup(this.form).then((res) => {
                if (res.code === 200) {
                  this.dialogTableVisible = false
                  this.$baseMessage('添加成功', 'success')
                  this.initData()
                } else {
                  this.$baseMessage(res.msg, 'error')
                }
              })
            } else {
              updateWechatGroup(this.form).then((res) => {
                if (res.code === 200) {
                  this.dialogTableVisible = false
                  this.$baseMessage('修改成功', 'success')
                  this.initData()
                } else {
                  this.$baseMessage(res.msg, 'error')
                }
              })
            }
          }
        })
      },
      // 修改显示隐藏状态
      changeStatus(data) {
        const params = {
          id: data.id,
          isShow: data.isShow,
        }
        updateWechatGroupStatus(params).then((res) => {
          if (res.code == 200) {
            this.$baseMessage('修改成功', 'success')
          } else {
            this.$baseMessage('修改失败', 'error')
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/styles/common.css';
  .region-container {
    .main-info-title {
      position: relative;
      height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;

      &:after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 3px;
        content: '';
        background-color: #409eff;
        border-radius: 3px;
        transition: all 0.5s ease;
      }

      &:hover:after {
        width: 120px;
      }
    }
    .clamp {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  ::v-deep {
    .el-upload-list__item {
      transition: none !important;
    }
  }
</style>
